<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    #include("common/header.html")
    <link type="text/css" rel="stylesheet" href="/css/wanshangziliao.css"/>
    <title></title>
</head>
<body>
<header style="background: #005aab;" class="mui-bar mui-bar-nav head">
    <!--<span class="mui-icon mui-icon-back"></span>-->
    <h1 style="color: #FFFFFF; letter-spacing: 4px;" class="mui-title">修改资料</h1>
    <!--<span class="mui-icon mui-icon-more"></span>-->
</header>
<nav style="background: #cccccc;" id="bottomx" class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="/business/">
        <span class="mui-icon iconfont icon-qiyedengji-copy"></span><br>
        <span class="mui-tab-label">业绩登记</span>
    </a>
    <a class="mui-tab-item " href="/integral/">
        <span class="mui-icon iconfont icon-icon18"></span><br>
        <span class="mui-tab-label">积分兑换</span>
    </a>
    <a class="mui-tab-item mui-active" href="/v/center">
        <span class="mui-icon iconfont icon-gerenzhongxin"></span><br>
        <span class="mui-tab-label">个人中心</span>
    </a>
</nav>
<div class="mui-content">
    <input type="hidden" id="id" value="${userInfo.id}"/>
    <div class="mui-input-group" id="validate">
        <div class="mui-input-row">
            <label>姓名</label>
            <input type="text" id="name" is-yz="true" yz-type="null" value="${userInfo.name}" class="mui-input-clear" placeholder="请输入您的姓名">
        </div>
        <div class="mui-input-row">
            <label>身份证</label>
            <input type="text" id="idcard" is-yz="true" yz-type="null,id" value="${userInfo.idCard}" class="mui-input-clear"
                   placeholder="请输入18位身份证号码">
        </div>
        <div class="mui-input-row" id="more_input">
            <label>省/市</label>
            <input id="showCityPicker3" style="width: 19%; padding: 0;padding-left: 5px;" type="text" value="${userInfo.area}"
                   class="mui-input-clear" placeholder="区">
            <div class="diqu">市</div>
            <input id="showCityPicker2" is-yz="true" yz-type="null" style="width: 19%; padding: 0;padding-left: 5px;"
                   type="text" value="${userInfo.city}"
                   class="mui-input-clear" placeholder="市">
            <div class="diqu">省</div>
            <input id="showCityPicker1" is-yz="true" yz-type="null" style="width: 19%; padding: 0;padding-left: 5px;"
                   type="text" value="${userInfo.province}"
                   class="mui-input-clear" placeholder="省">
        </div>
        <div class="mui-input-row">
            <label>服务机构</label>
            <input type="text" id="service_org" is-yz="true" yz-type="null" value="${userInfo.serviceOrg}" class="mui-input-clear"
                   placeholder="请输入所在服务机构">
        </div>
        <div class="mui-input-row">
            <label>部门</label>
            <input type="text" id="dept" is-yz="true" yz-type="null" value="${userInfo.dept}" class="mui-input-clear"
                   placeholder="请输入所在部门">
        </div>
        <div class="mui-input-row">
            <label>领导</label>
            <input type="text" id="leader_mobile" is-yz="true" yz-type="null,phone" value="${userInfo.leaderMobile}" class="mui-input-clear"
                   placeholder="请输入直属上级领导手机号">
        </div>
        <div class="mui-input-row">
            <label>手机号</label>
            <input type="text" id="mobile" is-yz="true" yz-type="null,phone" value="${userInfo.mobile}" class="mui-input-clear"
                   placeholder="手机号">
        </div>
        <div class="mui-input-row">
            <label>邮箱</label>
            #if($userInfo.email)
            <input type="email" id="email" is-yz="true" yz-type="null,email"
                   value="$userInfo.email" class="mui-input-clear" placeholder="请输入邮箱">
            #else
            <input type="email" id="email" is-yz="true" yz-type="null,email"
                   class="mui-input-clear" placeholder="请输入邮箱">
            #end
        </div>
        <div class="mui-input-row">
            <label>银行卡</label>
            #if($userInfo.bankcard)
            <input type="text" id="bankcard" is-yz="true" yz-type="null" value="$userInfo.bankcard"
                   class="mui-input-clear" placeholder="请输入银行卡">
            #else
            <input type="text" id="bankcard" is-yz="true" yz-type="null"
                   class="mui-input-clear" placeholder="请输入银行卡">
            #end
        </div>
        <div class="annue">
            <button type="button" class="mui-btn mui-btn-primary" onclick="edit()">保存</button>
        </div>
    </div>
</div>
</body>
<script>
    mui.init();

    var reg_validate = $("#validate").validator();

    function edit(){

        if(!reg_validate.check()){
            return;
        }

        var id = $.trim($("#id").val());
        var name = $.trim($("#name").val());
        var idCard = $.trim($("#idcard").val());
        var province = $.trim($("#showCityPicker1").val());
        var city = $.trim($("#showCityPicker2").val());
        var area = $.trim($("#showCityPicker3").val());
        var serviceOrg = $.trim($("#service_org").val());
        var dept = $.trim($("#dept").val());
        var leaderMobile = $.trim($("#leader_mobile").val());
        var mobile = $.trim($("#mobile").val());
        var email = $.trim($("#email").val());
        var bankcard = $.trim($("#bankcard").val());

        mui.ajax('/v/info', {
            data: {
                id: id,
                name : name,
                idCard : idCard,
                province : province,
                city : city,
                area : area,
                serviceOrg : serviceOrg,
                dept : dept,
                leaderMobile : leaderMobile,
                mobile : mobile,
                email : email,
                bankcard : bankcard
            },
            dataType: 'json',//服务器返回json格式数据
            type: 'PUT',//HTTP请求类型
            timeout: 10000,//超时时间设置为10秒；
            success: function (data) {
                //服务器返回响应，根据响应结果，分析是否登录成功；
                console.log(data);
                if(data.code == -1){
                    mui.toast(data.msg);
                    return;
                }

                mui.alert('修改成功!',"提示","确定",function () {
                    mui.openWindow({
                        url: '/v/center',
                        id:'/v/center'
                    });
                });
            },
            error: function (xhr, type, errorThrown) {
                //异常处理；
                console.log(type);
                mui.toast('请求异常,请稍后重试!');
            }
        });
    }


    nav_tab();

    (function ($, doc) {
        $.init();
        $.ready(function () {
            var cityPicker3 = new $.PopPicker({
                layer: 3
            });
            cityPicker3.setData(cityData3);
            var show_sheng = doc.getElementById('showCityPicker1');
            var show_shi = doc.getElementById('showCityPicker2');
            var show_qu = doc.getElementById('showCityPicker3');
            var more_input = document.getElementById("more_input");
            var listinput = more_input.getElementsByClassName("mui-input-clear");
            for (var i = 0; i < listinput.length; i++) {
                listinput[i].addEventListener('tap', function (event) {
                    cityPicker3.show(function (items) {
                        sheng = (items[0] || {}).text;
                        shi = (items[1] || {}).text;
                        qu = (items[2] || {}).text;
                        if (sheng.indexOf("省") > 0) {
                            show_sheng.value = sheng.substring(0, sheng.lastIndexOf('省'));
                        } else {
                            show_sheng.value = sheng;
                        }
                        if (show_shi.value.indexOf("市") > 0) {
                            show_shi.value = shi.substring(0, shi.lastIndexOf('市'));
                        } else {
                            show_shi.value = (items[1] || {}).text;
                        }
                        if (qu == "" || qu == undefined) {
                            show_qu.value = '';
                        } else {
                            show_qu.value = qu;
                        }
                    });
                }, false);
            }

        });
    })(mui, document);
</script>
</html>
